<{include file="top.html"}>
<link rel="stylesheet" type="text/css" href="Public/Wap/css/style.css"/>
<link rel="stylesheet" type="text/css" href="Public/Wap/css/xy-confirm.css"/>
<style>
    .listItem {
        background-color: white;
        border-bottom: 1px solid #eaeaea;
        overflow-x:scroll; overflow-y:hidden; white-space:nowrap;
        height: 8rem;
    }
    .listItemElem1 {
        width: 6rem;
        padding: 1rem;
        -webkit-box-flex: initial;
        flex: initial;
    }
    .listItemElem2 {
        padding: 1rem 1rem 1rem 0;
        display: inline-block;
        white-space: initial;
        -webkit-box-flex: 1;
        flex: 1;
    }
    .contentContainer{
        width: 100%; height: 100%;
        vertical-align: top;
    }
    .deleteBtn{
        background-color: red;
        width: 8rem; height: 8rem; line-height: 8rem;
        display: inline-block;
        text-align: center;
        color: white;
        vertical-align: top;
    }
    .msgContent{
        margin-top:1rem;
        width:90%;
        line-height:1.8rem;
        height:3.6rem;
        overflow:hidden;
        display:relative;
    }
</style>


<script src="<{$preStaticUrl}>Wap/js/require.js"></script>
<script src="<{$preStaticUrl}>Wap/js/requireConfig.js"></script>
<script src="<{$preStaticUrl}>Wap/js/flexible.js"></script>
<script type="text/javascript">
    require(["jquery","knockout","components/xy-confirm","components/xy-scroller"],function($,ko,xyConfirm,xyScroller){
        $(function(){
            function viewModel(){
                var self = this;
                this.listData = ko.observableArray();
                this.onClearBtnClick = function(){
                    if(!self.confirmPanel){
                        self.confirmPanel = new xyConfirm();
                        self.confirmPanel.onConfirm = self.onClearConfirm;
                    }
                    self.confirmPanel.show();
                };
                this.onClearConfirm = function(){
                    var listData=vm.listData();
                    var idStr=new Array();
                    for(var i=0;i<listData.length;i++){
                        idStr[i]=listData[i].id;
                    }
                    $.getJSON("<{U('Notice/delAll')}>",function(data){
                        if(data.status==0)
                            self.listData.removeAll();
                        layer.msg(data.msg);
                    });

                };
                this.onDeleteBtnClick = function(d,e){
                    $.getJSON("<{U('Notice/delete')}>&id="+d.id,function(data){
                        if(data.status==0)
                            self.listData.remove(d);
                        layer.msg(data.msg);
                    });
                };
                this.onListItemMove = function(d,e){
                    e = e.originalEvent ? e.originalEvent : e;
                    var t = e.currentTarget, point = e.touches ? e.touches[0] : e;
                    var newX = point.pageX, newY = point.pageY;
                    var deltaX = newX - t.pointX, deltaY = newY - t.pointY;
                    // console.log("newX:" + newX + " newY:" + newY + " deltaX:" + deltaX + " deltaY:" + deltaY);
                    t.pointX = newX; t.pointY = newY;
                    if(Math.abs(deltaX) > Math.abs(deltaY))
                    {
                        console.log("stopPropagation");
                        e.stopPropagation();
                    }
                };
                this.onListItemTouch = function(d,e){
                    e = e.originalEvent ? e.originalEvent : e;
                    var t = e.currentTarget, point = e.touches ? e.touches[0] : e;
                    t.pointX = point.pageX; t.pointY = point.pageY;
                    e.stopPropagation();
                };
            };

            var vm = new viewModel();

            function onLoadMore(){
                if(loadFlag) {
                    loadFlag = 0;
                    loadData();
                }
            };
            function onRefresh(){
                page = 1;
                //这里将page作为参数发送ajax请求获取数据，待获取到数据后执行以下代码
                vm.listData.removeAll();
                loadData();
            };

            ko.applyBindings(vm);

            $("#theList").show();//theList一开始是隐藏的，应用KO绑定之后需要显示出来
            var scroller = new xyScroller(".xy-panel-content","#theList",{onLoadMore:onLoadMore, onRefresh:onRefresh, eventPassthrough:"horizontal"});
            scroller.regenerate();

            var page=1;
            var loadFlag=1;
            function loadData(){
                $.getJSON("<{U('Notice/loadmore')}>", {page: page}, function (data) {

                    if (data.status == 1) {
                        layer.msg("数据获取失败，请稍后重试或联系管理员解决！");
                    } else if (data.status == 0) {
                        if (data.notice.length < 1) {
                            scroller.isNoMoreData(true);
                            $("#content").hide();
                            $("#none").show();
                            $(".xy_scroller_pullup").hide();

                        } else {
                            $("#content").show();
                            $("#none").hide();
                            for (var i = 0; i < data.notice.length; i++) {
                                vm.listData.push(data.notice[i]);
                            }
                            ++page;
                            if (data.nextPage) {
                                loadFlag = 1;
                                scroller.isNoMoreData(false);
                            } else {
                                scroller.isNoMoreData(true);//如果没有更多数据则设置该值为true
                            }
                            scroller.refresh();//页面更新完之后需要刷一下滑动列表
                        }
                    } else {
                        layer.msg("数据获取失败，请稍后重试或联系管理员解决！");
                    }
                });
            }
        });

    });

</script>
</head>
<body>
<div class="xy-panel">
    <div class="xy-panel-top">
        <div class="xy-titlebar">
            <div class="xy-titlebar-left">
                <a class="insertBefore_left_arrow_gray" href="javascript:void(0);"></a>
            </div>
            <div class="xy-titlebar-title">消息</div>
            <div class="xy-titlebar-right">
                <div class="spacer"></div>
                <a data-bind="click:onClearBtnClick">清空</a>
            </div>
        </div>
    </div>
    <div class="xy-panel-content" style="bottom:0;overflow:hidden">
        <div id="content" style="position: relative; display:none">
            <div class="xy_scroller_pulldown">下拉刷新</div>
            <ul id="theList" data-bind="foreach:listData">

                <li class="listItem">
                    <div class="xy-row-inline contentContainer">
                        <a data-bind="attr:{href:link}"><img class="listItemElem1" data-bind="attr:{src:icon}"/></a>
                        <div class="listItemElem2">
                            <div>
                                <span class="grayFont" style="float:right" data-bind="text:time"></span>
                                <span class="blackFont fontSizeMM" data-bind="text:name"></span>
                            </div>
                            <a data-bind="attr:{href:link}"><div data-bind="text:content" class="msgContent"></div></a>
                        </div>

                    </div>
                    <div class="xy-row-inline deleteBtn" data-bind="click:$parent.onDeleteBtnClick">删除</div>
                </li>
            </ul>
            <div class="xy_scroller_pullup">加载中……</div>
        </div>
        <div class="none-box" id="none" style="display:none">
            <span class="news-icon"></span>
            <dl>您还没有收到任何消息</dl>
        </div>
    </div>
</div>
<{include file="signBody.html"}>

</body>
</html>
